<template>
	<view class="">


		<view class="bgIndex ">
			<liu-slide-img :heightNumber="730" :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
			<view class="masked">

			</view>

			<view class="topLocation" @click="NavBackFn()">
				<view :style="{ height: (heightSystemss*2)+25 + 'rpx' }"></view>
				<uni-icons type="left" size="30"></uni-icons>
			</view>

			<view class="flex-between bottomLocation">



				<view class="margin-left_10rpx">
					<view class="font-weight font-size_40rpx" style="color: #fff;margin-bottom: 10rpx;">
						{{userInfoData.nickname}}
					</view>
					<view class="flex-start-center">
						<text style="margin-right: 10rpx;color: #fff;">{{userInfoData.fans}} 粉丝</text>
						<text style="margin-right: 10rpx;color: #fff;">{{userInfoData.follow}} 关注</text>
						<view v-if="userInfoData.sex==2" class="genderBtn flex">
							<image class="genderImg" :src="womenticon" mode=""></image>
							<text>{{userInfoData.age?userInfoData.age:0}}</text>
						</view>
						<view v-if="userInfoData.sex==1" class="boyBtn flex">
							<image class="genderImg" :src="nanicon" mode=""></image>
							<text>{{userInfoData.age?userInfoData.age:0}}</text>
						</view>

					</view>
					<view class="margin-top_20rpx font-overflow2" style="color: #fff;width: 400rpx;">
						<text>{{userInfoData.introduce?userInfoData.introduce:'该用户暂无资料,实名认证后展示全部'}}</text>
					</view>
					<view class="margin-top_20rpx" style="color: #fff">
						<text>{{userInfoData.city_name?userInfoData.city_name:'无地址'}} | </text>
						<text style="margin-left: 5rpx;">{{userInfoData.height?userInfoData.height:'175'}}cm | </text>
						<text style="margin-left: 5rpx;">{{userInfoData.school?userInfoData.school:'无学校'}}</text>

					</view>
				</view>

				<view v-if="userInfoData.speech" class="tape flex" @click.stop="palyAudioFn(userInfoData.speech)">
					<image v-if="!isPaly" class="playerImg" :src="suspend" mode=""></image>
					<image v-else class="playerImg" src="../../static/组合 1574.png" mode=""></image>

					<view class="audio">
						<view :class="isPaly?'wave':'waveOne'"></view>
						<view :class="isPaly?'wave':'waveOne'"></view>
						<view :class="isPaly?'wave':'waveOne'"></view>
						<view :class="isPaly?'wave':'waveOne'"></view>
						<view :class="isPaly?'wave':'waveOne'"></view>
						<view :class="isPaly?'wave':'waveOne'"></view>
					</view>
					<text class="">
						{{duration?duration:'-'}}s
					</text>
				</view>

			</view>

		</view>
		<view class="ellipse ">
			<view class="flex-start">
				<view class="margin-right_40rpx " :class="tabIndex==index?'font-weight':'color666'"
					v-for="(item,index) in tabs" :key="index" @click="switchTbsFn(index)">
					{{item.name}}
				</view>
			</view>

			<view class="flex-wrap-flex-start">
				<view class="tagList flex" :style="{ '--bg-bg': '#FDEDF2','--bg-color': '#FF3977' }"
					v-for="(item,index) in userInfoData.tagList " :key="index">

					<text>{{item}}</text>

				</view>
			</view>

			<view class="serviceItems">
				<view class="flex-start-center logo">
					<block v-for="(item,index) in logoList" :key="index">
						<image v-if="index<5" class="logoImg" :src="item.avatar" mode=""></image>
					</block>

				</view>

				<view v-if="logoList.length" class="right flex font-weight" style="color:#333333" @click="findServe()">
					<text>找他服务</text>

					<uni-icons type="right" color="#333333" size="15"></uni-icons>
				</view>
				<view v-else class="right flex font-weight" style="color:#333333;margin-right: 15rpx;">
					<text>暂无其他服务</text>

				</view>
			</view>
			<view class="flex-start-center margin-top_30rpx margin-bottom_30rpx">
				<view class="flex-align-center">

					<view class="font-weight font-size_32rpx">
						动态相册
					</view>
				</view>

			</view>
			<view class="imageList">
				<scroll-view v-if="userInfoData&&userInfoData.img.length" @scrolltolower="nextPage" scroll-view
					scroll-with-animation='true' class="scroll-view_H" scroll-x="true">
					<view id="im_0" class="bottom"></view>
					<block v-for="(item,indexss) in userInfoData.img" :key="indexss">
						<view class="scroll-view-item_H  flex-column" @click="imgScare(userInfoData.img,2)">
							<image class="albumIcon" :src="item" mode="aspectFill"></image>

						</view>

					</block>

				</scroll-view>
				<view v-else>
					<image :src="none1" mode="aspectFill"></image>
				</view>


				<view class="">
					<view class="flex-between margin-top_30rpx margin-bottom_10rpx">
						<view class="flex-align-center">

							<view class="font-weight font-size_32rpx">
								动态信息
							</view>
						</view>
						<view v-if="!Object.keys(dynamicInformation).length == 0" style="color: #999;"
							@click="viewMoreFn(dynamicInformation)">
							<text>查看更多</text>
							<uni-icons color="#999" type="right" size="15"></uni-icons>
						</view>
					</view>
					<block v-if="!Object.keys(dynamicInformation).length == 0">
						<view class="flex-start-center margin_20rpx_0">
							<view class="evaluationsTitle">
								{{dynamicInformation.title}}
							</view>
							<view class="" v-for="(items,i) in dynamicInformation.notice_user_list" :key="i">
								<text class="margin-left_10rpx"
									style="color: #7E5CFF;">@{{dynamicInformation.nickname}}</text>
							</view>
						</view>
						<view class="" v-if="dynamicInformation&&dynamicInformation.img">
							<view  @click="imgScare(dynamicInformation.img[0],1)" class="" v-if="dynamicInformation.img.length==1">
								<image class="achievementsImg" :src="dynamicInformation.img[0]" mode="aspectFill">
								</image>
							</view>
							<view class="" v-if="dynamicInformation.img.length>1">
								<view class="flex-start-center-wrap ">

									<block v-for="(img,indexs) in dynamicInformation.img" :key="indexs">
									 <view @click="imgScare(dynamicInformation.img,2)">
									 	<image class="image" :src="img"  mode="aspectFill">
									 	</image>
									 </view>
									</block>
								</view>
							</view>
						</view>
						<!-- 用户评价 -->
						<view class="flex-between margin-top_20rpx margin-bottom_20rpx">
							<view class="flex-align-center">

								<view class="">
									发布于：{{dynamicInformation.create_time}}
								</view>
							</view>
							<view class="flex-start-center">
								<view class="flex" style="color: #999;margin-right: 10rpx;">
									<image class="like" :src="follow" mode=""></image>
									{{dynamicInformation.like_number}}
								</view>
								<view class="flex" style="color: #999;">
									<image class="like" :src="comment" mode=""></image>
									{{ dynamicInformation.comment_number}}
								</view>
							</view>
						</view>
					</block>
					<view v-else class="flex">
						<image style="width:350rpx" :src="none1" mode="aspectFill"></image>
					</view>

				</view>

				<view class="flex-between">
					<image @click="SwitchPages(userInfoData.id)" class="fixedImgYellow" :src="star" mode=""></image>
					<image v-if="userInfoData.is_follow==0" class="fixedImgPink"
						src="https://z4a.net/images/2024/06/28/-861.png" mode=""
						@click="followUserFn(userInfoData.id,userInfoData.is_follow)">

						<image v-else class="fixedImgPink" src="https://z4a.net/images/2024/06/28/-862.png" mode=""
							@click="followUserFn(userInfoData.id,userInfoData.is_follow)">
							<button open-type="share" class="v-btncss">
								<image class="fixedImgBlue" src="https://z4a.net/images/2024/06/28/-860.png" mode="">
								</image>
							</button>
							<image @click="privateChat(userInfoData.id)" class="fixedBtnImg"
								src="https://n8.weijuyunke.com/2024-07-03/ca4c4202407030319589503.png" mode=""></image>
				</view>



				<!-- 	<view style="height: 100rpx;">

				</view> -->
			</view>

		</view>
		<view class="serviceDetails">



		</view>
		<!-- 服务项目 -->
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain flex-column-Jstart">

					<view class="top flex-between">
						<view class="">

						</view>
						<text>服务项目</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="servicePersonnel" style="padding: 30rpx;" v-if="serviceList.length">

						<view class="flex-between" v-for="(item,index) in serviceList" :key="index">
							<view class="flex-start-center">
								<image class="img margin-right_16rpx" :src="item.icon" mode="">
								</image>
								<view class="  margin-left_16rpx">
									<view class="font-weight ">
										{{item.name}}
									</view>
									<view class="flex">
										<view class="score flex">
											<text>{{scoreStatusTotalsFn(Number(item.technology_score_total),Number(item.service_score_total),Number(item.voice_score_total))}}分</text>
										</view>
										<view class="service flex">
											<text>服务{{item.order_number}}个订单</text>
										</view>
									</view>
									<view class="flex-start-center" style="color: #666666;">

										<view class="flex-start-center margin-right_16rpx">

											<text
												style="color: red;">{{item.price}}</text><text>{{currency_name}}/{{item.work_time}}分钟</text>
										</view>

									</view>
								</view>
							</view>
							<view class="makeAppointmentBtn flex" @click="goDeatilServerFn(item)">
								立即预约
							</view>
						</view>


					</view>
					<view v-else class="">

						<image style="width:350rpx" :src="none1" mode="aspectFit"></image>
					</view>

				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="organizeTeamPopup">
			<template v-slot:content>

				<view class="serviceItemsContain flex-column-Jstart">

					<view class="top flex-between">
						<view class="">

						</view>
						<text>组队搭子</text>
						<uni-icons @click='closeFn()' class="uniIcon" type="clear" size="30" style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="servicePersonnel" v-if="daziList.length">

						<view class="buildList " v-for="(item,index) in daziList" :key="index">
							<view class="flex-end-top " @click="goDeatilFn(item.id)">
								<view class="">
									<image class="orderImg" :src="item.img" mode="">
									</image>
								</view>
								<view class="margin-left_16rpx flex-columns" style="width:454rpx;height: 180rpx;">
									<view class="font-overflow2 font-weight" style="width:100%">
										{{item.title}}


									</view>
									<view class="flex-between">
										<view class=" font-overflow flex-start-center">

											<view class="" v-for="(content,index) in item.labelList" :key="index">

												<view class="tagTitle  flex">
													{{content}}
												</view>
											</view>


										</view>
										<image class="addImg" :src="addicon" mode="aspectFit">
										</image>
									</view>
									<view class="flex-between">
										<view class="flex-start-center">
											<image class="avaterImg" :src="item.avatar" mode=""></image>
											<text>{{item.nickname}}</text>
										</view>
										<view class="flex-start-center">
											<view class="flex-between v-p-share" v-if="item.join_data.length">
												<view class="v-m-width not-font-overflow flex1">
													<block v-for="(img, index) in item.join_data" :key="index">
														<image v-if="index<5" class="pt_img" :src="img.avatar"></image>
													</block>
													<image class="pt_img"
														:src="headDazi" mode="">
													</image>
												</view>

											</view>

											
										</view>
										<view class="" style="color: rgb(234, 72, 13);">
											<image class="fireImg" src="https://z4a.net/images/2024/06/12/-831.png"
												mode=""></image>
											<text>{{item.people_number}}搭,差{{item.people_number-item.join_data.length}}人</text>
										</view>
									</view>
									<!-- <view class="flex-between">
										<view class="flex-start-center">
											<image class="avaterImg" src="../../static/第一行所有图标/椭圆 4.png" mode="">
											</image>
											<text>123木子</text>
										</view>
										<view class="">
											<view class="flex-between v-p-share">
												<view class="v-m-width not-font-overflow flex1">
													<block v-for="(item, index) in detailInfo" :key="index">
														<image v-if="index<5" class="pt_img" :src="item.avatar"></image>
													</block>

												</view>

											</view>
										</view>
										<view class="flex" style="color: rgb(234, 72, 13);">
											<image class="fireImg" src="https://z4a.net/images/2024/06/12/-831.png"
												mode=""></image>
											<text>10人</text>
										</view>
									</view> -->
								</view>

							</view>
							<view style="margin-top: 15rpx; " class="flex-start-center">
								<image class="clock" :src="timing" mode=""></image>
								<text>{{item.create_time}}</text>
								<view class="location flex-around margin-left_10rpx">
									<image class="addressImg" :src="dwBlue" mode=""></image>

									<text>{{item.city_name}}</text>
								</view>
							</view>
						</view>


					</view>
					<view v-else class="">

						<image style="width:350rpx" :src="none1" mode="aspectFit"></image>
					</view>



				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	// import Socket from '@/utils/socket1.js';
	import numSelect from '../../components/poiuy-numSelect/numSelect.vue'
	export default {
		components: {
			numSelect
		},
		data() {
			return {
				currency_name:uni.getStorageSync('system').currency_name,
				none1: this.$img.none1,
				suspend: this.$img.suspend,
				comment: this.$img.comment,
				follow: this.$img.follow,
				womenticon: this.$img.womenticon,
				nanicon: this.$img.nanicon,
				addicon: this.$img.addicon,
				dwBlue: this.$img.dwBlue,
				timing: this.$img.timing,
				star: this.$img.star,
				headDazi:this.$img.headDazi,
				userInfo: uni.getStorageSync("userInfo"),
				rateValue: 5,
				autoplay: true,
				interval: 3000,
				tabIndex: 0,
				socialList:[],
				listPoster: [{

					img: 'http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png'
				}],
				logoList: [],
				detailInfo: [],

				tabs: [{
					name: '资料',
					id: 0
				}, {
					name: '服务项目',
					id: 1
				}, {
					name: '搭子组队',
					id: 2
				}],
				tagList: [{
					tagNmae: '23岁',
					color: '#FF3977',
					bg: '#FDEDF2'
				}, {
					tagNmae: '23岁',
					color: '#FF3DCD',
					bg: '#FEEEFF'
				}, {
					tagNmae: '23岁',
					color: '#181818',
					bg: '#ECF3FD'
				}, {
					tagNmae: '23岁',
					color: '#181818',
					bg: '#ECF3FD'
				}, {
					tagNmae: '23岁',
					color: '#FF3977',
					bg: '#FDEDF2'
				}, {
					tagNmae: '23岁',
					color: '#FF3977',
					bg: '#FDEDF2'
				}],
				queryPage: {
					limit: 10,
					page: 1

				},
				total: 5,
				userInfoData: null,
				dynamicInformation: {},
				id: null,
				daziList: [],
				serviceList: [],
				heightSystemss: 0,
				isPaly: false,
				duration: '',
				shareSignBol: false



			}
		},
		onLoad(options) {
			if (options.uid.includes("-")) {

				let parts = options.uid.split("-");
				this.id = parts[0]
				this.createdgetSystemInfo()
				this.visitUserFn(this.id)
				if (this.id) {
					this.id = this.id
					this.init(this.id)
					this.tabClassIfyFn()
					this.circleListFn(this.id)
				}
				
				if (parts[1] == 1) {
					// 那么分享进来的只能读不能操作如果操作自己注册
				
					this.shareSignBol = true
				}

			} else {



				this.createdgetSystemInfo()
				this.visitUserFn(options.uid)
				if (options.uid) {
					this.id = options.uid
					this.init(options.uid)
					this.tabClassIfyFn()
					this.circleListFn(options.uid)
				}
				


			}


		},
		onUnload() {

		},
		computed: {
			// scoreStatusFn: function() {
			// 	let technology_score = Number(this.item.technology_score);
			// 	let service_score = Number(this.item.service_score);
			// 	let voice_score = Number(this.item.voice_score);

			// 	return Math.floor((technology_score + service_score + voice_score) / 3).toFixed(2);
			// }
			scoreStatusFn() {
				return function(technology_score, service_score, voice_score) {
					let score

					score = (((technology_score + service_score + voice_score) / 3).toFixed(2))
					console.log(score)
					this.averageScore = score

					return ''


				}
			},
			scoreStatusTotalFn() {
				return function(scoreTotal, commentNumber, name) {
					let score

					score = ((scoreTotal / commentNumber).toFixed(2))
					console.log(score)
					if (name == 'technology_score') {
						this.technology_score = score
					} else if (name == 'service_score') {
						this.service_score = score
					} else {
						this.voice_score = score
					}


					return ''


				}
			},
			scoreStatusTotalsFn() {
				return function(technology_score, service_score, voice_score) {
					let score

					score = (((technology_score + service_score + voice_score) / 3).toFixed(1))


					return score


				}
			},

		},
		methods: {
			SwitchPages(id){
				this.socialList=uni.getStorageSync('socialList')
				
				const array = this.socialList.filter(item => item.id !== id);
				const randomIndex = Math.floor(Math.random() * array.length);
				const randomObject = array[randomIndex];
				console.log(randomObject)
				
				this.$sun.toast('即将给你推荐下一个','none')
				setTimeout(()=>{
					this.$sun.navTo('/pagesB/index/socialDetails', {
						uid: randomObject.id
					})
				},1000)
				
			
				
			},
			// imgScare(img) {
			// 	console.log(img)
			// 	uni.previewImage({
			// 		urls: [img],
			// 		longPressActions: {
			// 			itemList: ['发送给朋友', '保存图片', '收藏'],
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			
			
			// },
			imgScare(img,len) {
				console.log(img)
				
				if(len==1){
					uni.previewImage({
						urls: [img],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}else{
					uni.previewImage({
						urls: img,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								
							},
							fail: function(err) {
								
							}
						}
					});
				}
			
			
			},

			// onShareAppMessage(res) {


			// 	return {
			// 		// 自定义分享标题
			// 		title: '社交详情',
			// 		imageUrl: this.circleDetail.img ? this.circleDetail.img : '',
			// 		path: 'pagesB/index/socialDetails?uid=' + this.id + '-1'
			// 	};
			// },
			findServe() {
				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')
				} else {
					this.$sun.navRe('/pages/home/home', {
						currentIndex: 2
					})
				}


			},
			palyAudioFn(speech) {


				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				innerAudioContext.onCanplay(() => {
					innerAudioContext.duration; // 触发以初始化
				setTimeout(() => {
					this.duration = innerAudioContext.duration.toFixed(0);
					if('Infinity'==this.duration){
						this.duration=''
					}
					console.log(innerAudioContext.duration); // 输出音频时长，单位：秒
				}, 1000); // 设置延时1秒获取
				});
				// 控制播放与暂停
				if (!this.isPaly) {
					console.log('播放');
					// 绑定播放事件
					innerAudioContext.play();
					this.isPaly = true;
					// innerAudioContext.onPlay(() => {
					// 	console.log('开始播放1');
					// 	// innerAudioContext.play();
					// 	this.isPaly = true;
					// });
				} else {
					console.log('暂停');
					// 绑定暂停事件
					innerAudioContext.pause();
					this.isPaly = false;

				}
			},

			privateChat(id) {
				// 直接不可以和自己聊天
				if(this.userInfo.id==id){
					this.$sun.toast('自己不可以和自己聊天', 'none')
				}else{
					if (this.shareSignBol) {
						this.$sun.toast('当前为阅读模式', 'none')
					} else {
						setTimeout(() => {
							this.$sun.navGo('/pagesB/index/HM-chat/HM-chat', {
								uid: id
							})
						})
					}
				}
				
				
				

			},
			viewMoreFn(item) {
				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')
				} else {
					// console.log(item)
					this.$sun.navGo('/pages/index/wechatMoments', {
						uid: item.uid
					})
				}

			},
			NavBackFn() {
				this.$sun.navBack()
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			goDeatilServerFn(item) {
				this.$refs.serviceItemsPopup.close()

				this.$sun.navGo('/pagesB/index/serviceDetails', {
					...item
				})


			},
			goDeatilFn(id) {
				this.$refs.organizeTeamPopup.close()

				console.log(id)
				this.$sun.navGo('/pagesB/index/buildSubDetail', {
					id: id
				})
			},
			async visitUserFn(uid) {
				const res = await this.$http.post({
					url: this.$api.visitUser,
					data: {

						uid:uid

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (res.code == 0) {
					this.$sun.toast(res.message, 'none')


				} else {
					this.$sun.toast(res.message, 'none')
				}
			},
			async followUserFn(id, follow) {
				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')
				} else {
					const res = await this.$http.post({
						url: this.$api.followUser,
						data: {

							follow: follow == 0 ? 1 : 0,
							uid: id

						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})
					if (res.code == 0) {
						this.$sun.toast(res.message, 'none')
						setTimeout(() => {
							this.init(this.id)
						}, 1000)

					} else {
						this.$sun.toast(res.message, 'none')
					}
				}
			},
		
			async circleListFn(uid) {
				const resPoster = await this.$http.post({
					url: this.$api.circleList,
					data: {

						page: 1,
						limit: 1,
						uid: uid

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)

					if (resPoster.data.list.length) {
						this.dynamicInformation = resPoster.data.list[0]


						if (this.dynamicInformation?.img.includes(',')) {

							// 包含的进行slice(',') 分割

							this.dynamicInformation.img = this.dynamicInformation.img.split(',').map((item) => item
								.trim());
						} else {
							if (this.dynamicInformation.img.length) {
								this.dynamicInformation.img = this.dynamicInformation.img.split().map((item) => item
									.trim());
							} else {
								this.dynamicInformation.img = []
							}

							// this.dynamicInformation.img = [
							// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
							// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
							// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
							// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png',
							// 	'https://n8.weijuyunke.com/2024-06-28/a6939202406281049023506.png'
							// ]

							// ]
						}
						console.log(this.dynamicInformation)
					} else {
						this.dynamicInformation = {}
					}

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async tabClassIfyFn() {
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 3,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)


					this.logoList = resPoster.data.list.slice(0, 5).map((item) => {
						return {
							avatar: item.icon
						};
					});


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async init(id) {
				const result = await this.$http.post({
					url: this.$api.userInfo,
					data: {
						id: id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					this.userInfoData = result.data

					if (result.data.img && result.data.img.includes(',')) {

						// 包含的进行slice(',') 分割

						this.userInfoData.img = result.data.img.split(',').map((item) => item.trim());
					} else {
						if (result.data.img && result.data.img.length) {
							this.userInfoData.img = result.data.img.split().map((item) => item.trim());
						} else {
							this.userInfoData.img = []
						}



					}
					if (result.data.label.includes(',')) {

						// 包含的进行slice(',') 分割

						this.userInfoData.tagList = result.data.label.split(',').map((item) => item.trim());
					} else {
						if (result.data.label.length) {
							this.userInfoData.tagList = result.data.label.split().map((item) => item.trim());
						} else {
							this.userInfoData.tagList = []
						}


					}

					const imgList = result.data.background_img.split(",")
					this.listPoster = imgList.map(item => {
						return {
							img: item
						}
					})


				} else {

					this.$sun.toast(result.message, 'none')
				}
			},
			nextPage() {
				// console.log(111)
				if (this.queryPage.limit * this.queryPage.page >= this.total) {
					return this.$sun.toast('亲 没有更多了~', 'none')
				} else {
					this.queryPage.page += 1
					// this.init()
				}
			},
			switchTbsFn(index) {
				if (this.shareSignBol) {
					this.$sun.toast('当前为阅读模式', 'none')

				} else {
					if (index == 1) {
						this.$refs.serviceItemsPopup.show({
							anim: 'bottom',
							position: 'bottom',
							shadeClose: false, //false使用户不能点击其它关闭页面
							topclose: false,
							zIndex: 99999
						});
						this.serviceListFn()

					}
					if (index == 2) {
						this.$refs.organizeTeamPopup.show({
							anim: 'bottom',
							position: 'bottom',
							shadeClose: false, //false使用户不能点击其它关闭页面
							topclose: false,
							zIndex: 99999
						});
						// 掉搭子列表接口
						this.daziListFn()

					}
					this.tabIndex = index
				}

			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},

			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
				this.tabIndex = 0
			},
			closeFn() {
				this.$refs.organizeTeamPopup.close()
				this.tabIndex = 0
			},

			async serviceListFn() {
				const resPoster = await this.$http.post({
					url: this.$api.serviceList,
					data: {

						page: 1,
						limit: 100,
						uid: this.id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)

					this.serviceList = resPoster.data.list


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async daziListFn() {
				const resPoster = await this.$http.post({
					url: this.$api.daziList,
					data: {

						page: 1,
						limit: 100,
						uid: this.id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)


					resPoster.data.list.forEach((item) => {

						item.labelList = item.label.split(",")
					})
					this.daziList = resPoster.data.list


				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		position: relative;

		// padding: 23rpx;
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-image: url('http://yunhunjian123.oss-cn-shanghai.aliyuncs.com/2024-06-11/1b5f0202406111537307450.png');
		// width: 808rpx;
		// height: 730rpx;
		.masked {
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.2);
			/* 半透明背景 */
			pointer-events: none;
			width: 100vw;
			height: 800rpx;
		}


		.tape {

			height: 68rpx;
			left: 580rpx;
			border-radius: 40rpx;
			color: #fff;
			border-radius: 40rpx 0rpx 0rpx 40rpx;

			box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgb(201, 134, 255);
			background: linear-gradient(90.00deg, rgb(40, 139, 255) 4.217%, rgb(143, 84, 254) 100%);

			.playerImg {
				width: 45rpx;
				height: 45rpx;
				margin-top: 8rpx;
			}

			.audio {
				margin: 0 10rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				height: 50rpx;
				width: 30%;

				.wave {
					width: 7px;
					margin: 0 2px;
					background-color: #4caf50;
					animation: audio-wave 1s infinite ease-in-out;

					&:nth-child(1) {
						animation-delay: 0.1s;
					}

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.3s;
					}

					&:nth-child(4) {
						animation-delay: 0.4s;
					}

					&:nth-child(5) {
						animation-delay: 0.5s;
					}
				}
				.waveOne {
					width: 7px;
					margin: 0 2px;
					background-color: #4caf50;
					animation: audio-wave 1s 1 ease-in-out;
					 animation-fill-mode: both;
				
					&:nth-child(1) {
						animation-delay: 0.1s;
					}
				
					&:nth-child(2) {
						animation-delay: 0.2s;
					}
				
					&:nth-child(3) {
						animation-delay: 0.3s;
					}
				
					&:nth-child(4) {
						animation-delay: 0.4s;
					}
				
					&:nth-child(5) {
						animation-delay: 0.5s;
					}
				}
			}

			@keyframes audio-wave {
				0% {

					height: 6px;
					transform: translateY(0px);
					background: #ff8e3a;
				}

				25% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				50% {
					height: 10px;
					transform: translateY(-5px) scaleY(1.5);
					background: #ed509e;
				}

				75% {
					height: 6px;
					transform: translateY(0px);
					background: #9c73f8;
				}

				100% {
					height: 6px;
					transform: translateY(0px);
					background: #0fccce;
				}
			}

		}



		.bottomLocation {
			width: 100%;
			position: absolute;
			margin-left: 20rpx;
			bottom: 44rpx;
		}

		.topLocation {
			width: 100%;
			position: absolute;
			margin-left: 20rpx;
			top: 0
		}

		.img {
			width: 104rpx;
			height: 104rpx;
		}

		.genderBtn {


			padding: 0 15rpx;
			border-radius: 100rpx;
			color: rgb(246, 91, 203);
			background: rgb(255, 236, 242);

			.genderImg {
				margin-right: 10rpx;
				vertical-align: middle;
				width: 18rpx;
				height: 18rpx;
			}

		}

		.boyBtn {

			height: 34rpx;
			padding: 0 10rpx;
			border-radius: 100rpx;
			color: #8c6cca;
			background: #DCE0FD;

			.genderImg {
				margin-right: 10rpx;
				vertical-align: middle;
				width: 18rpx;
				height: 18rpx;
			}

		}


		.followBtn {
			border-radius: 100rpx;
			width: 120rpx;
			height: 60rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(162, 101, 252), rgb(223, 111, 252) 100%);
		}

	}



	.serviceItemsContain {
		padding: 0rpx 30rpx 30rpx 30rpx;
		background-color: #fff;

		height: auto;
		overflow-x: auto;

		.none1 {
			width: 400rpx;
			height: 400rpx;
		}

		.servicePersonnel {
			margin-bottom: 30rpx;
			width: 100%;

			border-radius: 10px;

			background: #ececec;


			.buildList {

				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 12rpx;

				margin-top: 20rpx;
				border-radius: 20rpx;

				.tagImg {
					width: 118rpx;
					height: 38rpx;
				}

				.addImg {
					width: 30.02rpx;
					height: 30.02rpx;
				}

				.tagTitle {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(0, 198, 141);
					background: rgb(212, 255, 249);
					margin-right: 5rpx;
				}

				.avaterImg {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}

				.fireImg {
					width: 26rpx;
					height: 26rpx;
				}

				.tagTitleGay {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #666666;
					background: #F5F5F5;
					margin-right: 5rpx;
				}

				.tagTitleOrange {
					padding: 10rpx 20rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: rgb(238, 100, 41);
					background: rgba(238, 100, 41, 0.13);
					;
					margin-right: 5rpx;
				}

				.tagTitlePink {
					width: 116rpx;
					height: 36rpx;
					border-radius: 12rpx 12rpx 24rpx 12rpx;
					font-size: 20rpx;
					color: #F95CEF;
					background: #FFF2F8;
					margin-right: 5rpx;
				}

				.location {
					width: 110rpx;
					height: 48rpx;
					border-radius: 20rpx;

					background: rgb(235, 245, 255);
				}

				.clock {
					width: 26.16rpx;
					height: 26.16rpx;
					margin-right: 5rpx;
				}

				.v-p-share {
					padding: 2rpx 2rpx 0 2rpx;

					.v-m-width {
						margin-right: 40rpx;

						.pt_img {
							width: 50rpx;
							height: 50rpx;
							margin-right: -15rpx;
							border-radius: 50%;
						}
					}

					.v-share-friend {
						text {
							color: #294d7d;
							font-size: 24rpx;
							padding-right: 50rpx;
						}

						view {
							color: #ffffff;
							width: 154rpx;
							height: 58rpx;
						}
					}

					.v-share-friend2 {
						text {
							color: #294d7d;
							font-size: 24rpx;
						}
					}
				}

				.orderImg {
					width: 192rpx;
					height: 192rpx;
					border-radius: 30rpx;


				}

				.addressImg {
					width: 28.5rpx;
					height: 28.12rpx;
				}
			}

			.img {
				width: 104rpx;
				height: 104rpx;
			}

			.genderBtn {

				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(246, 91, 203);
				background: rgb(255, 236, 242);

				.genderImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 9px;
					height: 9px;
				}
			}

			.goldBtn {
				margin-left: 10rpx;
				height: 34rpx;
				padding: 3rpx 10rpx;
				border-radius: 100rpx;
				color: rgb(255, 255, 255);


				background: linear-gradient(90.00deg, rgb(250, 190, 112) 0%, rgb(250, 199, 133) 100%);

				.goldImg {
					margin-right: 10rpx;
					vertical-align: middle;
					width: 20rpx;
					height: 20rpx;
				}

			}

			.switchingServices {
				width: 174rpx;
				height: 64rpx;
				border-radius: 200rpx;
				color: rgb(102, 102, 102);
				background: rgb(247, 247, 247);
			}

			.point {
				background: rgb(68, 215, 182);
				width: 13rpx;
				height: 13rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

		}

		.makeAppointmentBtn {
			width: 158rpx;
			height: 64rpx;
			border-radius: 20rpx;
			color: #fff;
			background: linear-gradient(90.00deg, rgb(56, 144, 252) 0%, rgb(126, 92, 255) 100%);

		}

		.score {
			width: 98rpx;
			height: 42rpx;
			border-radius: 12rpx 8rpx 20rpx 12rpx;
			margin: 15rpx 0;
			color: #fff;
			margin-right: -14rpx;
			z-index: 555;
			background: linear-gradient(90.00deg, rgb(255, 123, 14), rgb(255, 178, 38) 100%);
		}

		.service {

			height: 42rpx;

			padding: 3rpx 20rpx;
			border-radius: 2rpx;
			color: rgb(51, 51, 51);
			background: linear-gradient(90.00deg, rgb(255, 220, 181), rgb(255, 241, 214) 100%);
		}



		.top {
			padding: 30rpx 0;
			width: 100%;

			text {
				color: rgb(0, 0, 0);
				font-size: 36rpx;
				font-weight: 400;
			}
		}

		.content {

			width: 698rpx;
			height: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background: rgb(255, 242, 242);

			.positionCoupon {
				padding: 8rpx;
				width: 154rpx;
				height: 50rpx;
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				color: rgb(255, 0, 0);
				background: rgb(255, 219, 219);
				font-size: 24rpx;
			}

			.couponPrice {
				padding: 20rpx 26rpx;

				.left {
					margin-right: 32rpx;
				}

				.claimNow {
					width: 144rpx;
					height: 58rpx;
					border-radius: 25rpx;
					color: #fff;
					background: rgb(255, 0, 0);
				}
			}
		}

		.bottom {
			border-radius: 600rpx;
			width: 662rpx;
			height: 96rpx;
			box-shadow: 0px 4px 4px 0px rgba(28, 197, 45, 0.2);
			background: rgb(255, 0, 0);
			color: #fff;
			position: fixed;
			bottom: 20rpx;
		}
	}

	.ellipse {
		padding: 23rpx 23rpx 0rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -26rpx;
		z-index: 999;
		position: relative;

		background: rgb(255, 255, 255);

		.serviceItems {
			position: relative;
			margin-top: 30rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('https://z4a.net/images/2024/06/12/-832.png');
			width: 704rpx;
			height: 94rpx;

			.logo {
				position: absolute;
				top: 23rpx;
				left: 30%;

				.logoImg {

					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 8rpx;

				}
			}

			.right {
				position: absolute;
				right: 0;
				top: 30rpx;
			}

		}

		.imageList {
			margin: 18rpx 0 0rpx 0;

			.like {
				width: 36.26rpx;
				height: 36.26rpx;

			}

			.fixedImgBlue {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				// box-shadow: 0px 0px 8px 2px rgba(47, 204, 254, 0.37);
			}

			.fixedImgPink {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				// box-shadow: 0px 0px 7px 3px rgba(251, 70, 148, 0.3);
			}

			.fixedImgYellow {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				// box-shadow: 0px 1px 6px 4px rgba(252, 186, 0, 0.17);
			}

			.v-btncss {
				padding: 0;
				margin-right: 0rpx;
				height: 124rpx;
				background-color: transparent;
			}

			.fixedBtnImg {
				width: 335.38rpx;
				height: 124rpx;
			}

			.scroll-Y {
				height: 300rpx;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				margin-bottom: 20rpx;
			}

			.uni-bg-red {
				background-color: red;
			}

			.uni-bg-green {
				background-color: green;
			}

			.uni-bg-blue {
				background-color: blue;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				margin-right: 10rpx;

				text-align: center;
				font-size: 36rpx;

				.albumIcon {
					width: 216rpx;
					height: 216rpx;
				}

				.release {

					width: 90rpx;
					height: 40rpx;
					line-height: 36rpx;
					;
					margin: auto;
					font-size: 20rpx;
					border-radius: 4rpx;
					border: 2rpx solid #1E6CEB;
					color: #FFF;
					background: #1E6CEB;
				}
			}


		}
	}

	.tagList {
		// width: 118rpx;
		height: 64rpx;
		padding: 0 15rpx;
		border-radius: 20rpx;
		background-color: (var(--bg-bg));
		color: (var(--bg-color));

		margin-right: 20rpx;
		margin-top: 30rpx;
	}

	.image {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
		padding: 5rpx;
	}

	.serviceDetails {
		padding: 10rpx;



		.achievementsImg {

			height: 362rpx;
		}


		.evaluateStars {

			height: 190rpx;
			border-radius: 20rpx;
			padding: 40rpx;

			background: rgb(242, 242, 242);
		}

		.evaluateList {
			margin-bottom: 45rpx;

			.img {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}

			.detailsText {
				margin: 20rpx 0 20rpx 86rpx;
			}
		}

		.line {
			width: 2rpx;
			height: 101rpx;
			border: 2rpx solid rgb(228, 227, 227);
		}

		.addTieziBtn {
			width: 710rpx;
			height: 100rpx;

			color: #fff;
			border-radius: 130rpx;

			background: linear-gradient(90.00deg, rgb(59, 142, 252), rgb(126, 92, 255) 100%);
			position: fixed;
			bottom: 20rpx;

			z-index: 999;
		}
	}
</style>